<template>
    <!-- 视频监控-视频设备 -->
    <div class="main_content">
        <div class="left">
            <div class="left_logo">
                <img src="../../assets/images/fvs/common/fvs_fz.png"/>
                <span>分组筛选</span>
            </div>
            <div class="input">
                <Input
                    placeholder="请输入分组名称"
                    search
                    enter-button
                    clearable
                    v-model="groupName"
                    @on-search="searchGroupFn"
                    @on-change="searchGroupChangeFn"
                    @on-clear="searchGroupClearFn"
                >
                    <Icon type="ios-search" slot="suffix" style="color: #1891FF" />
                </Input>
            </div>
            <div class="scorll">
                <el-tree
                    :default-expand-all="true"
                    :data="treeList"
                    ref="treeBox"
                    node-key="id"
                    :render-content="renderContent"
                    :expand-on-click-node="false"
                    :highlight-current="true"
                    :filter-node-method="filterNode"
                ></el-tree>
            </div>
        </div>
        <div class="content">
            <div class="search">
                <div class="search_l">
                    <div class="list">
                        <Select v-model="deviceType" style="width: 200px" placeholder="请选择设备类型" filter-by-label>
                            <Option v-for="item in deviceTypeList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                    </div>

                    <div class="list">
                        <Select v-model="webcamTypeId" style="width: 200px" placeholder="请选择摄像头类型" filter-by-label>
                            <Option :value="-1" :key="-1">全部</Option>
                            <Option v-for="item in webcamTypeList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                    </div>
                    <div class="list">
                        <Select v-model="platformId" style="width: 200px" placeholder="请选择云服务厂商" filter-by-label>
                            <Option :value="-1" :key="-1">全部</Option>
                            <Option v-for="item in platformList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                    </div>
                    <div class="list">
                        <Input v-model="keyword" style="width: 200px" placeholder="请输入设备名称" clearable></Input>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                    <input type="text" class="intBox" style="display: none" />
                    <div class="list" @click="onSerch">
                        <Button type="primary">搜索</Button>
                    </div>
                    <div class="list" @click="onReset">
                        <Button>重置</Button>
                    </div>
                </div>
                <div class="search_r">
                    <div class="list" v-show="btnList.includes('fvs/mach/add')" style="margin-right: 15px">
                        <el-button
                            icon="el-icon-plus"
                            style="padding: 8px 14px;border-radius: 15px;"
                            type="info"
                            size="small"
                            @click="updateRow(0)"
                            plain
                            ><span class="text" style="color: var(--themeColor);font-size: 12px;">添加监控设备</span>
                        </el-button>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="table">
                    <el-table
                        :data="list"
                        :height="tableHeight"
                        row-key="id"
                        :stripe="true"
                        :tree-props="{children: 'children',hasChildren: 'hasChildren'}"
                    >
                        <template slot="empty">
                            <div class="no_lsit" style="width: 96%; margin: auto">
                                <img src="./../../assets/images/common/rotary_nodata.png" style="width: 100%; height: 100%" />
                            </div>
                        </template>
                        <el-table-column prop="name" label="设备名称" class-name="flexClass">
                            <template slot-scope="scope">
                                <div class="empty" style="width: 23px; height: 20px" v-if="scope.row.deviceType == 0 || scope.row.children.length == 0"></div>
                                <div class="p" v-if="scope.row.deviceType == 0">
                                    <img src="../../assets/images/fvs/device/fvs_sxt1.png" style="width: 40px;height: 40px;margin-right: 5px;" />
                                    <Tooltip transfer :content="scope.row.name ? scope.row.name : '—'" placement="top-start" max-width="200">
                                        <p style=" width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;">
                                            {{ scope.row.name ? scope.row.name : "—" }}
                                        </p>
                                    </Tooltip>
                                </div>
                                <div class="p" v-if="scope.row.deviceType == 1">
                                    <img src="../../assets/images/fvs/device/fvs_sxt3.png" style="width: 40px;height: 40px;margin-right: 5px;" />
                                    <Tooltip transfer :content="scope.row.name ? scope.row.name : '—'" placement="top-start" max-width="200">
                                        <p style="width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;">
                                            {{ scope.row.name ? scope.row.name : "—" }}
                                        </p>
                                    </Tooltip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="webcamType" label="摄像头类型">
                            <template slot-scope="scope">
                                <div class="p" v-if="scope.row.webcamType == 1">球机</div>
                                <div class="p" v-if="scope.row.webcamType == 2">枪机</div>
                                <div class="p" v-if="scope.row.webcamType == 3">鹰眼摄像机</div>
                                <div class="p" v-if="scope.row.webcamType == 4">其他</div>
                                <div class="p" v-if="!scope.row.webcamType">—</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="groupName" label="分组">
                            <template slot-scope="scope">
                                <div class="p">
                                    <img src="../../assets/images/fvs/common/fvs_fz.png" style="width: 40px;height: 40px;margin-right: 5px;" />
                                    <Tooltip transfer :content="scope.row.groupName ? scope.row.groupName : '—'" placement="top-start" max-width="200">
                                        <p style="width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;">
                                            {{ scope.row.groupName ? scope.row.groupName : "—" }}
                                        </p>
                                    </Tooltip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="platform" label="云服务">
                            <template slot-scope="scope">
                                <div class="p">
                                    <img src="../../assets/images/fvs/device/fvs_gs.png" style="width: 40px;height: 40px;margin-right: 5px;" />
                                    <span v-if="scope.row.platform == 0">海康萤石云</span>
                                    <span v-if="scope.row.platform == 6">海康萤石云GB28181</span>
                                    <span v-if="scope.row.platform == 1">大华乐橙</span>
                                    <span v-if="scope.row.platform == 2">阿里云RTMP</span>
                                    <span v-if="scope.row.platform == 3">阿里云GB28181</span>
                                    <span v-if="scope.row.platform == 4">直播地址播放</span>
                                    <span v-if="scope.row.platform == 5">自定义流媒体服务器</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="排序（越大越靠前）" align="center" width="100px">
                            <template slot-scope="scope">
                                <el-input size="small" :key="scope.row.id" v-model="scope.row.idx" @blur="changeSort(scope.row)" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="deviceStatus" label="设备状态" align="center" width="100px">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.deviceStatus == 0" type="info" size="small" >离线</el-tag>
                                <el-tag v-if="scope.row.deviceStatus == 1" type="success" size="small" >在线</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" v-if="btnList.includes('fvs/mach/edit') || btnList.includes('fvs/mach/del')">
                            <template slot-scope="scope">
                                <el-button
                                    v-show="btnList.includes('fvs/mach/edit')"
                                    type="text"
                                    size="small"
                                    @click.native.prevent="updateRow(1, scope.$index, scope.row)"
                                    >编辑
                                </el-button>

                                <el-button
                                    v-if="scope.row.deviceStatus == 0"
                                    v-show="btnList.includes('fvs/mach/del')"
                                    type="text"
                                    size="small"
                                    @click.native.prevent="removeRow(scope.$index, scope.row)"
                                    ><span class="text" style="color: #ff0000;font-size: 12px;">删除</span>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix"  >
                    <div class="float-right">
                        <Page
                            v-if="totalCount"
                            style="margin: 20px 0; text-align: center"
                            :current.sync="current"
                            :total="totalCount"
                            :page-size="pageSize"
                            show-elevator
                            show-total
                            @on-change="pageChange"
                        ></Page>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="updateModal" :title="isAdd ? '添加监控设备' : '编辑监控设备'" width="600px" :mask-closable="false" class-name="detailsModal">
            <div class="msg">
                <div class="title">
                    <h2>
                        <span class="bc"></span>
                        <span>设备信息</span>
                    </h2>
                </div>
                <div class="list">
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>设备名称:</span>
                        <Input v-model="name" placeholder="请输入设备名称" style="width: 300px" :maxlength="32" clearable />
                    </div>
                </div>
                <div class="list">
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>SN码:</span>
                        <Input v-model="sn" placeholder="请输入SN码" style="width: 300px" :maxlength="100" clearable />
                    </div>
                </div>
                <div class="list">
                    <div class="item1">
                        <span>设备类型:</span>
                        <el-radio v-model="deviceTyperadio" label="0" :disabled="!isAdd" >网络摄像头</el-radio>
                        <el-radio v-model="deviceTyperadio" label="1" :disabled="!isAdd" >硬盘录像机</el-radio>
                    </div>
                </div>
                <div class="list" v-if="deviceTyperadio != 1">
                    <div class="item1">
                        <span>摄像头类型:</span>
                        <Select v-model="webcamType" style="width: 300px" placeholder="请选择摄像头类型">
                            <Option v-for="item in webcamTypeList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                    </div>
                </div>
                <div class="list">
                    <div class="item1">
                        <span>品牌型号:</span>
                        <Input v-model="model" placeholder="请输入品牌型号" style="width: 300px" clearable />
                    </div>
                </div>
                <div class="list">
                    <div class="item1">
                        <span>尺寸重量:</span>
                        <Input v-model="size" placeholder="请输入尺寸重量" style="width: 300px" clearable />
                    </div>
                </div>
                <div class="list">
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>所属分组:</span>
                        <!-- <Select v-model="group_id" style="width: 300px" placeholder="请选择所属分组" :disabled="!moveFlag"> -->
                            <!-- 2023-05-16 通过硬盘录像机添加的摄像头需要重新分组 -->
                        <Select v-model="group_id" style="width: 300px" placeholder="请选择所属分组">
                            <Option v-for="item in groupList" :value="item.groupId" :key="item.groupId" >{{ item.groupName }}</Option>
                        </Select>
                    </div>
                </div>
                <div class="list" v-if="isAdd">
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>云服务厂商:</span>
                        <Select v-model="platform" style="width: 300px" placeholder="请选择设备云服务厂商" @on-change="getPlatformType" v-if="deviceTyperadio == '0'">
                            <Option v-for="item in platformList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                        <Select v-model="platform" style="width: 300px" placeholder="请选择设备云服务厂商" @on-change="getPlatformType" v-else>
                            <Option v-for="item in filterPlatformList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
                        </Select>
                    </div>
                </div>
                <div class="list" v-if="!isAdd">
                    <div class="item1">
                        <span>厂商:</span>
                        <Input v-model="platformName" :disabled="!isAdd" style="width: 300px" clearable />
                    </div>
                </div>
                <div style="margin-top: 20px" class="title" v-if="platform === 0 || platform === 1 || platform === 2 || platform === 3 || platform === 4 || platform === 5 || platform === 6">
                    <h2>
                        <span class="bc"></span>
                        <span>设备参数</span>
                    </h2>
                </div>
                <div class="list" v-if="platform == 3 || platform === 6">
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>国标设备ID:</span>
                        <Input v-model="gbId" placeholder="请输入国标设备ID" style="width: 300px" :disabled="!isAdd" clearable />
                    </div>
                </div>
                <div class="list" v-if="platform == 4">
                    <div class="item1">
                        <span class="tip">*</span>
                        <span>直播地址流:</span>
                        <Input v-model="playUrl" placeholder="请输入直播地址流" style="width: 300px" :disabled="!isAdd" clearable />
                    </div>
                </div>
                <div class="list" v-if="platform === 0 || platform === 1 || platform === 2 || platform === 3 || platform === 5 || platform === 6">
                    <div class="item1">
                        <span class="tip">*</span>
                        <span v-if="platform === 0 || platform === 1">序列号:</span>
                        <span v-if="platform === 2 || platform === 5">设备流ID:</span>
                        <span v-if="platform === 3">用户名:</span>
                        <span v-if="platform === 6">项目编号:</span>
                        <Input v-model="username" :placeholder="placeholderName" style="width: 300px" :disabled="!isAdd" clearable />
                    </div>
                </div>
                <div class="list" v-if="platform === 0 || platform === 1 || platform == 3 || platform == 6">
                    <div class="item1">
                        <span class="tip" v-if="platform === 0 || platform === 6" >*</span>
                        <span v-if="platform === 0 || platform === 1">验证码:</span>
                        <span v-if="platform === 3">密码:</span>
                        <span v-if="platform === 6">License:</span>
                        <Input v-model="password" :placeholder="placeholderPsw" style="width: 300px" type="password" :disabled="!isAdd" clearable />
                    </div>
                </div>
                <div class="title" style="margin-top: 20px">
                    <h2>
                        <span class="bc"></span>
                        <span>设备配置</span>
                    </h2>
                </div>
                <div class="list">
                    <div class="item1">
                        <span>默认清晰度:</span>
                        <el-radio v-model="streamMode" :label="1">流畅</el-radio>
                        <el-radio v-model="streamMode" :label="2">高清</el-radio>
                    </div>
                </div>
                <div class="list">
                    <div class="item1">
                        <span>视频编码:</span>
                        <el-radio v-model="playMode" :label="1">H264</el-radio>
                        <el-radio v-model="playMode" :label="2">H265</el-radio>
                    </div>
                </div>
                <div class="list">
                    <div class="item1">
                        <span>云台控制:</span>
                        <el-switch v-model="ptz"></el-switch>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel(1)"
                    style="padding: 7px 25px;border-radius: 15px;"
                    type="info"
                    plain
                    size="mini">
                    取消
                </el-button>
                <el-button
                    @click="submitAll"
                    type="primary"
                    style="padding: 7px 25px;border-radius: 15px;"
                    size="mini"
                    v-preventReClick="1500">
                    <span style="color: #fff">确定</span>
                </el-button>
            </div>
        </Modal>

        <Modal v-model="deleteModal" title="删除监控设备" width="360px;" :mask-closable="false" class-name="detailsModal">
            <div style="margin: 10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(2)"
                    style="padding: 7px 25px;border-radius: 15px;"
                    type="info"
                    size="mini">
                    <span style="color: #1891ff">取消</span>
                </el-button>
                <el-button
                    @click="detele"
                    type="primary"
                    style="padding: 7px 25px;border-radius: 15px;"
                    size="mini"
                    v-preventReClick="1500">
                    <span style="color: #fff">确定</span>
                </el-button>
            </div>
        </Modal>

        <Modal v-model="groupModal" :title="isGroupAdd ? '添加分组' : '编辑分组'" width="360px;" :mask-closable="false" class-name="detailsModal">
            <div class="item2">
                <span class="tip">*</span>
                <span>分组名称:</span>
                <Input v-model="group_name" placeholder="请输入" style="width: 300px" :maxlength="32" clearable />
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel(3)"
                    style="padding: 7px 25px;border-radius: 15px;"
                    type="info"
                    size="mini">
                    <span style="color: #1891ff">取消</span>
                </el-button>
                <el-button
                    @click="addGrounpBtn"
                    type="primary"
                    style="padding: 7px 25px; border-radius: 15px;"
                    size="mini"
                    v-preventReClick="1500">
                    <span style="color: #fff">确定</span>
                </el-button>
            </div>
        </Modal>

        <Modal v-model="groupDelModal" title="删除分组" width="360px;" :mask-closable="false" class-name="detailsModal">
            <div style="margin: 10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(4)"
                    style="padding: 7px 25px;border-radius: 15px;"
                    type="info"
                    size="mini">
                    取消
                </el-button>
                <el-button
                    @click="deteleGroup"
                    type="primary"
                    style="padding: 7px 25px;border-radius: 15px;"
                    size="mini"
                    v-preventReClick="1500">
                    <span style="color: #fff">确定</span>
                </el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getDevice,
    getDeviceDetail,
    getDeviceAdd,
    getDeviceEdit,
    getDeviceRemove,
    getGroupTreeList,
    getFvsGroupAdd,
    getFvsGroupEdit,
    getFvsGroupDel,
    getFvsGroupList,
    getFvsSnapshot,
    getFvsSnapshotDetail,
    fvsSort
} from "@/api/api.js";
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            totalCount: "",
            current: 1,
            keyword: "",
            list: [],
            groupList: [],
            btnList: [],
            isAdd: false,
            updateModal: false,
            deleteModal: false,
            groupModal: false,
            isGroupAdd: false,
            groupDelModal: false,
            isCollapse: false,
            moveFlag: true,
            name: "",
            sn: "",
            platform: "",
            gbId: "",
            username: "",
            password: "",
            desc: "",
            deptId: "",
            deptName: "",
            updateId: "",
            removeID: "",
            platformList: [
                {
                    id: 0,
                    name: "海康萤石云",
                },
                {
                    id: 6,
                    name: "海康萤石云GB28181",
                },
                {
                    id: 1,
                    name: "大华乐橙",
                },
                {
                    id: 2,
                    name: "阿里云RTMP",
                },
                {
                    id: 3,
                    name: "阿里云GB28181",
                },
                {
                    id: 4,
                    name: "直播地址播放",
                },
                // {
                //     id:5,
                //     name:'自定义流媒体服务器'
                // },
            ],
            filterPlatformList: [
                {
                    id: 0,
                    name: "海康萤石云",
                },
                {
                    id: 1,
                    name: "大华乐橙",
                },
            ],
            webcamTypeList: [
                {
                    id: 1,
                    name: "球机",
                },
                {
                    id: 2,
                    name: "枪机",
                },
                {
                    id: 3,
                    name: "鹰眼摄像机",
                },
                {
                    id: 4,
                    name: "其他",
                },
            ],
            placeholderName: "",
            placeholderPsw: "",
            platformName: "",
            type: "",
            playUrl: "",
            webcamType: "",
            model: "",
            size: "",
            streamMode: 1,
            playMode: 1,
            ptz: false,
            deviceTypeList: [
                {
                    id: -1,
                    name: "全部",
                },
                {
                    id: 0,
                    name: "网络摄像头",
                },
                {
                    id: 1,
                    name: "硬盘录像机",
                },
            ],
            deviceType: -1,
            webcamTypeId: -1,
            platformId: -1,
            deviceTyperadio: "0",
            groupId: "", //搜索分组id
            group_id: "", //提交数据分组id
            groupName: "", //搜索分组内容
            group_name: "", //提交数据分组内容
            treeList: [],
            tableHeight:window.innerHeight - 305,
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.name;
                this.pageNum = 1;
                this.current = 1;
                this.deviceType = -1;
                this.keyword = "";
                this.groupName = "";
                this.groupId = "";
                this.group_id = "";
                this.group_name = "";
                this.deviceTyperadio = "0";
                this.getGroupTreeListFn();
                this.getFvsGroupListFn();
            }
        },
    },
    methods: {
        isCollapseFn() {
            this.isCollapse = !this.isCollapse;
            this.$store.commit("setIsCollapseFlag", this.isCollapse);
        },
        getAllList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                keyword: this.keyword,
                deptId: this.deptId,
                groupId: this.groupId ? this.groupId : "",
                deviceType: this.deviceType == -1 ? "" : this.deviceType,
                webcamType: this.webcamTypeId == -1 ? "" : this.webcamTypeId,
                platform: this.platformId == -1 ? "" : this.platformId,
            };
            getDevice(params)
                .then((res) => {
                    if (res.code == 200) {
                        res.data.list.forEach((v) => {
                            v.flag = true;
                            if (v.children) {
                                v.children.forEach((item) => {
                                    item.flag = false;
                                });
                            }
                        });
                        this.list = res.data.list;

                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        // 获取侧边栏分组列表
        getGroupTreeListFn() {
            this.treeList = [];
            let params = {
                deptId: this.deptId,
                keyword: this.groupName,
            };
            getGroupTreeList(params)
                .then((res) => {
                    if (res.code == 200) {
                        if (res.data.list.length > 0) {
                            let obj = {
                                title: "全部",
                                label: "全部",
                                id: 0,
                                num: 0,
                                index: 0,
                                children: [],
                            };
                            let list = res.data.list;
                            list.forEach((v, i) => {
                                v["name"] = v.groupName;
                                if (v.groupName.length > 5) {
                                    v.groupName =
                                        v.groupName.substring(0, 5) + "...";
                                }
                                v["label"] = v.groupName;
                                v["id"] = v.groupId;
                                v["num"] = v.deviceNum;
                                v["index"] = i + 1;
                                obj.num += v["num"];
                                obj.children.push(v);
                            });
                            this.treeList = [obj];
                            if (!this.groupId) {
                                this.groupId = 0;
                            }
                            this.getAllList();
                        } else {
                            this.groupId = 0;
                            this.getAllList();
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //获取分组列表
        getFvsGroupListFn() {
            let params = {
                deptId: this.deptId,
            };
            getFvsGroupList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.groupList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        searchGroupFn() {
            this.getGroupTreeListFn();
        },
        searchGroupChangeFn() {
            this.getGroupTreeListFn();
        },
        searchGroupClearFn() {
            this.getGroupTreeListFn();
        },
        onSerch() {
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        onReset(){
            this.deviceType = null
            this.webcamTypeId = null
            this.platformId = null
            this.keyword = null
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        // keyworkFn() {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        // },
        // keyworkChangeFn() {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        // },
        // keyworkClearFn() {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        // },
        // selectChangeFn(name) {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        // },
        // webcamTypeSelectFn(name) {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        // },
        // platformSelectFn(name) {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        // },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        showGroupFn(type, data) {
            if (type == 0) {
                this.isGroupAdd = true;
                this.group_name = "";
            } else if (type == 1) {
                this.isGroupAdd = false;
                this.groupId = data.id;
                this.group_name = data.name;
            }
            this.groupModal = true;
        },
        addGrounpBtn() {
            if (!this.group_name) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入分组名称",
                });
                return;
            }
            if (this.isGroupAdd) {
                let params = {
                    deptId: this.deptId,
                    name: this.group_name,
                };
                getFvsGroupAdd(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.groupModal = false;
                            this.getGroupTreeListFn();
                            this.getFvsGroupListFn();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            } else {
                let params = {
                    groupId: this.groupId,
                    name: this.group_name,
                };
                getFvsGroupEdit(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.groupModal = false;
                            this.getGroupTreeListFn();
                            this.getFvsGroupListFn();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        deteleGroup() {
            getFvsGroupDel(this.groupId)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.getGroupTreeListFn();
                        this.groupDelModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getPlatformType(index) {
            this.platform = index;
            this.gbId = "";
            this.username = "";
            this.password = "";
            if (index == 0 || index == 1) {
                this.placeholderName = "请输入设备序列号";
                this.placeholderPsw = "请输入设备验证码";
            } else if (index == 2 || index == 5) {
                this.placeholderName = "请输入设备流ID";
            } else if (index == 3) {
                this.placeholderName = "请输入设备用户名";
                this.placeholderPsw = "请输入设备密码";
            } else if (index == 6) {
                this.placeholderName = "请输入项目编号";
                this.placeholderPsw = "请输入License";
            }
        },
        updateRow(type, index, rows) {
            if (!this.groupId) {
                if (this.treeList[0].children.length > 0) {
                    this.group_id = this.treeList[0].children[0].id;
                }
            }
            if (type == 0) {
                this.isAdd = true;
                this.name = "";
                this.sn = "";
                this.platform = "";
                this.gbId = "";
                this.username = "";
                this.password = "";
                this.roomType = "";
                this.playUrl = "";
                this.deviceTyperadio = "0";
                this.webcamType = "";
                this.model = "";
                this.size = "";
                this.streamMode = 1;
                this.playMode = 1;
                this.ptz = false;
                this.moveFlag = true;
            } else if (type == 1) {
                this.isAdd = false;
                this.updateId = rows.id;
                this.moveFlag = rows.flag;
                let params = {
                    id: this.updateId,
                };
                getDeviceDetail(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.platformList.forEach((i) => {
                                if (res.data.platform == i.id) {
                                    this.platformName = i.name;
                                }
                            });
                            this.name = res.data.name;
                            this.sn = res.data.sn;
                            this.deviceTyperadio = String(res.data.deviceType);
                            this.platform = parseInt(res.data.platform);
                            this.gbId = res.data.gbId;
                            this.username = res.data.username;
                            this.password = res.data.password;
                            this.roomType = res.data.weighRoomId;
                            this.playUrl = res.data.playUrl;
                            this.group_id = res.data.groupId;
                            this.webcamType = res.data.webcamType;
                            this.model = res.data.model;
                            this.streamMode = res.data.streamMode || 1;
                            this.playMode = res.data.playMode || 1;
                            this.ptz = !!(res.data.ptz || false);
                            this.size = res.data.size;
                            console.log(
                                this.streamMode,
                                this.playMode,
                                this.ptz
                            );
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }
            this.updateModal = true;
        },
        
        submitAll() {
            if (this.name == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入设备名称",
                });
                return;
            }
            if (this.sn == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入SN码",
                });
                return;
            }
            if (this.group_id == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择分组",
                });
                return;
            }
            if (this.platform === "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择设备厂商",
                });
                return;
            }
            if (this.platform == 3) {
                if (this.gbId == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请输入国标设备ID",
                    });
                    return;
                }
            }
            if (this.platform == 4) {
                if (this.playUrl == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请输入直播地址流",
                    });
                    return;
                }
            }
            if (this.platform != 4) {
                if (this.username == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: this.placeholderName,
                    });
                    return;
                }
            }
            if (
                this.platform != 2 &&
                this.platform != 4 &&
                this.platform != 5 &&
                this.platform != 1
            ) {
                if (this.password == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: this.placeholderPsw,
                    });
                    return;
                }
            }

            if (this.isAdd) {
                let params = {
                    name: this.name,
                    sn: this.sn,
                    gbId: this.gbId,
                    username: this.username,
                    password: this.password,
                    deptId: this.deptId,
                    platform: this.platform,
                    playUrl: this.playUrl,
                    deviceType: this.deviceTyperadio,
                    groupId: this.group_id,
                    webcamType: this.webcamType,
                    model: this.model,
                    size: this.size,
                    playMode: this.playMode,
                    streamMode: this.streamMode,
                    ptz: this.ptz ? 1 : 0,
                };
                getDeviceAdd(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.group_id = this.groupId;
                            this.success();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            } else {
                let params = {
                    name: this.name,
                    sn: this.sn,
                    id: this.updateId,
                    groupId: this.group_id,
                    webcamType: this.webcamType,
                    model: this.model,
                    size: this.size,
                    playMode: this.playMode,
                    streamMode: this.streamMode,
                    ptz: this.ptz ? 1 : 0,
                };
                getDeviceEdit(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.group_id = this.groupId;
                            this.success();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }
        },
        success() {
            this.$Message.success("操作成功");
            this.updateModal = false;
            this.pageNum = this.isAdd ? 1 : this.pageNum;
            this.current = this.isAdd ? 1 : this.current;
            this.getGroupTreeListFn();
        },
        removeRow(index, rows) {
            this.removeID = rows.id;
            this.deleteModal = true;
        },
        detele() {
            getDeviceRemove(this.removeID)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.pageNum = 1;
                        this.getAllList();
                        this.deleteModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        cancel(type) {
            if (type == 1) {
                this.updateModal = false;
            } else if (type == 2) {
                this.deleteModal = false;
            } else if (type == 3) {
                this.groupModal = false;
            } else if (type == 4) {
                this.groupDelModal = false;
            }
        },
        renderContent(h, { root, node, data }) {
            if (data.id == 0) {
                if (this.btnList.includes("fvs/group/add")) {
                    return (
                        <div class="custom-tree-node">
                            <span
                                class="title"
                                on-click={() => this.getTreeId(data, node)}
                            >
                                {data.label}({data.num})
                            </span>
                            <span
                                class="btn"
                                style="text-center:center;font-size:14px;"
                            >
                                <i
                                    class="el-icon-plus"
                                    on-click={() => this.showGroupFn(0)}
                                ></i>
                            </span>
                        </div>
                    );
                } else {
                    return (
                        <div class="custom-tree-node">
                            <span
                                class="title"
                                on-click={() => this.getTreeId(data, node)}
                            >
                                {data.label}({data.num})
                            </span>
                        </div>
                    );
                }
            } else {
                // 1.编辑和删除按钮都存在
                if (
                    this.btnList.includes("fvs/group/del") &&
                    this.btnList.includes("fvs/group/edit")
                ) {
                    return (
                        <div class="custom-tree-node">
                            <span
                                class="title"
                                on-click={() => this.getTreeId(data, node)}
                            >
                                {data.label}({data.num})
                            </span>
                            <span class="btn">
                                <i
                                    class="el-icon-edit-outline"
                                    on-click={() => this.showGroupFn(1, data)}
                                ></i>
                                <i
                                    class="el-icon-delete"
                                    on-click={() => this.removeGroupRow(data)}
                                ></i>
                            </span>
                        </div>
                    );
                } else if (
                    !this.btnList.includes("fvs/group/del") &&
                    this.btnList.includes("fvs/group/edit")
                ) {
                    // 3.编辑按钮存在删除按钮不存在
                    return (
                        <div class="custom-tree-node">
                            <span
                                class="title"
                                on-click={() => this.getTreeId(data, node)}
                            >
                                {data.label}({data.num})
                            </span>
                            <span class="btn">
                                <i
                                    class="el-icon-edit-outline"
                                    on-click={() => this.showGroupFn(1, data)}
                                ></i>
                            </span>
                        </div>
                    );
                } else if (
                    this.btnList.includes("fvs/group/del") &&
                    !this.btnList.includes("fvs/group/edit")
                ) {
                    // 4.删除按钮存在编辑按钮不存在
                    return (
                        <div class="custom-tree-node">
                            <span
                                class="title"
                                on-click={() => this.getTreeId(data, node)}
                            >
                                {data.label}({data.num})
                            </span>
                            <span class="btn">
                                <i
                                    class="el-icon-delete"
                                    on-click={() => this.removeGroupRow(data)}
                                ></i>
                            </span>
                        </div>
                    );
                } else if (
                    !this.btnList.includes("fvs/group/del") &&
                    !this.btnList.includes("fvs/group/edit")
                ) {
                    // 2.编辑删除按钮都不存在
                    return (
                        <div class="custom-tree-node">
                            <span
                                class="title"
                                on-click={() => this.getTreeId(data, node)}
                            >
                                {data.label}
                            </span>
                        </div>
                    );
                }
            }
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        getTreeId(data, node, obj) {
            if (data.id == 0) {
                this.groupId = "";
                this.group_id = "";
            } else {
                this.groupId = data.id;
                this.group_id = data.id;
            }
            this.getAllList();
        },
        removeGroupRow(data) {
            this.groupId = data.id;
            this.groupDelModal = true;
        },

        /* 排序 */
        changeSort(record){
            let param = {
                id: record.id,
                idx: record.idx
            }
            fvsSort(param).then(res=>{
                this.$Message.success("排序成功");
                this.pageNum = 1;
                this.getAllList();
            })
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.deptName = this.$store.state.porjectObject.name;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getGroupTreeListFn();
        this.getFvsGroupListFn();
        this.$store.commit("setIsCollapseFlag", false);
    },
};
</script>

<style lang="less" scoped>
@import "./../../assets/style/fvs/modal.less";
@import "./../../assets/style/themeBase.less";
.main_content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    display: flex;
    .left {
        position: relative;
        width: 245px;
        height: 100%;
        overflow: hidden;
        background: #fff;
        .left_logo{
            display: flex;
            align-content: center;
            justify-content: center;
            margin-top:20px;
            font-size:20px;
            img{
                height:30px;
                margin-right: 10px;
            }
        }
        .input {
            width: 90%;
            margin: 15px auto;
            height: 32px;
            // .ivu-input-icon-clear {
            //     right: 30px;
            // }
            .ivu-input {
                width: 100%;
                height: 32px;
                background-color: transparent !important;
                color: #f5f5f5 !important;
            }
            .ivu-input-search {
                padding: 4px 7px !important;
            }
        }
        .el-menu {
            border-right: none;
            // background: linear-gradient(18deg, #071020 0%, #0C1B50 100%);
            background-color: transparent;
        }
        .el-menu-vertical-demo {
            height: 100%;
        }
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            height: 100%;
            // background: linear-gradient(18deg, #071020 0%, #0C1B50 100%);
            background-color: transparent;
        }
        .el-tree {
            width: 90%;
            margin: 0 auto;
            background-color: transparent !important;
        }
        .is-focusable {
            background-color: transparent !important;
        }

    }
    .content {
        flex: 1;
        height: 100%;
        margin-left: 10px;
        overflow: hidden;
        .search {
            padding: 20px;
            margin-bottom: 10px;
            background: #fff;
            border-radius: 6px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .search_l {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .list {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-right: 10px;
                    // .ivu-input-icon-clear {
                    //     right: 30px;
                    // }
                    .ivu-input {
                        width: 100%;
                        height: 32px;
                        background-color: transparent !important;
                    }
                    .ivu-input-search {
                        padding: 4px 7px !important;
                    }
                }
            }
            .search_r {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .list {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    /deep/.el-icon-plus {
                        color: var(--themeColor);
                    }
                    .el-button:hover {
                        .text {
                            color: #f0f9fe !important;
                        }
                        /deep/.el-icon-plus {
                            color: #f0f9fe !important;
                        }
                    }
                }
            }
        }
        .box {
            padding: 20px;
            background-color: #fff;
            height: calc(100% - 82px);
            overflow: hidden;
        }
        .table {
            .el-table {
                font-family: MicrosoftYaHei;
                font-size: 14px;
                td,
                th.is-leaf {
                    border-bottom: none;
                }
                tr {
                    border: none;
                }
                .p {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }
            }
            .el-table__row {
                background-color: #fff;
                cursor: pointer;
            }
            .el-table--striped
                .el-table__body
                tr.el-table__row--striped
                td {
                background-color: #f3f6fd;
                cursor: pointer;
            }
        }
    }
    .scorll {
        width: 100%;
        overflow-y: auto;
        height: 100%;
        /deep/.custom-tree-node {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title {
                width: 100px;
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .btn {
                margin-right: 10px;
                width: 35px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
    }
}
/deep/ th.flexClass {
    padding-left: 23px;
}
/deep/ .flexClass {
    .cell {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}
.msg {
    width: 96%;
    margin: 0 auto;
    .title {
        width: 100%;
        h2 {
            width: 100%;
            height: 30px;
            line-height: 30px;
            background: var(--themeColor2);
            margin: 0 auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 17px;
            box-sizing: border-box;
            .bc {
                width: 5px;
                height: 15px;
                background: var(--themeColor);
                margin-right: 12px;
            }
            .edit {
                cursor: pointer;
                margin-left: 12px;
            }
        }
    }
    .list {
        width: 94%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        .item1 {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            padding-left: 16px;
            box-sizing: border-box;
            span {
                display: block;
                width: 100px;
                height: 32px;
                line-height: 32px;
            }
            .tip {
                position: absolute;
                top: 0;
                left: 0;
                color: red;
                font-size: 16px;
            }
        }
    }
}
.item2 {
    width: 320px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    position: relative;
    margin-right: 50px;
    &.shooting {
        justify-content: flex-start;
    }
    span {
        width:120px;
        margin-left: 10px;
    }
    .tip {
        width:10px;
        color: red;
        font-size: 16px;
    }
}
/deep/.ivu-input-group{
    border-radius:20px;
}
/deep/.ivu-input-group .ivu-input{
    border-radius: 20px 0 0 20px;
    border-color:#EBF2F8;
    background:#EBF2F8;
}
/deep/.ivu-input-group-append{
    border-radius: 0 20px 20px 0;
}
/deep/.el-tag.el-tag--info{
    background-color:rgba(169, 176, 187, 0.1);
    border-radius:2px;
    border-color:#A9B0BB;
    color:#A9B0BB;
}
/deep/.el-tag.el-tag--success{
    background-color: rgba(63, 207, 119, 0.1);
    border-color:#28D79C;
    color: #3FCF77;
    border-radius:2px;
}
</style>
